<template>
  <div class="update-gender">
    <van-picker
      show-toolbar
      :columns="columns"
      :default-index="defaultIndex"
      @cancel="$emit('close')"
      @confirm="onConfirm"
      @change="onGenderChange"
    />
  </div>
</template>

<script>
import {updateUserProfile} from '@/api/user'

  export default {
    props:{
      value:{
        type:Number,
        required:true
      }
    },
    data() {
      return {
        columns: ['男', '女'],
        defaultIndex:this.value,
      }
    },
    methods: {
     async onConfirm(){
        this.$toast.loading({
        message:'保存中...',
        forbidclick:true
      })
      try {
        await updateUserProfile({
          gender:this.defaultIndex
      })
        this.$emit('close')
        this.$emit('input', this.defaultIndex)
        this.$toast.success('更新成功！')
      } catch (err) {
        this.$toast.fail('更改失败')
      }
    },
      onGenderChange(picker, value, index){
        this.defaultIndex = index
      }
    },
  }
</script>

<style lang="less" scoped>

</style>